<div class="wallets-container" *ngIf="filteredContactsList && filteredContactsList[0]">
  <div class="section-header">
    <ion-label class="key-name">
      <span translate>Contacts</span>
    </ion-label>
  </div>
  <div class="line-divider"></div>
  <ion-list no-lines class="bp-list" ng-class="{ 'disabled':itemTapped}">
    <button ion-item *ngFor="let item of filteredContactsList" (click)="close(item)">
      <ion-icon class="item-img" item-start>
        <gravatar [name]="item.name" [height]="40" [width]="40" [email]="item.email" [coin]="item.coin" [network]="item.network"></gravatar>
      </ion-icon>
      <div class="main-label">{{ item.name }}</div>
    </button>
  </ion-list>
</div>

<div *ngFor="let coin of availableCoins" ng-class="{ 'disabled':itemTapped}">
  <div class="wallets-container" *ngIf="walletList[coin] && walletList[coin][0]">
    <div class="section-header">
      <ion-label class="key-name">
        <span>{{'{coinName} Wallets' | translate: { coinName: getCoinName(coin) } }}</span>
      </ion-label>
    </div>
    <ion-list no-lines class="bp-list">
      <div *ngFor="let walletsByKey of filteredWalletsByKeys[0] ? filteredWalletsByKeys : walletsByKeys">
        <div class="key-divider" *ngIf="walletsByKey && walletsByKey[0]">
          <ion-icon>
            <img src="assets/img/settings-icons/icon-key.svg" width="15">
          </ion-icon>
          <span>{{ walletsByKey[0].walletGroupName }}</span>
        </div>
        <div *ngFor="let wallet of walletsByKey">
          <wallet-item-content [wallet]="wallet" (click)="close(wallet)"></wallet-item-content>
        </div>
      </div>
    </ion-list>
  </div>
</div>